.song-search {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	overflow-x: hidden;
	overflow-y: scroll;
	z-index: 800;
	overflow: hidden;
	._header{
		position: relative;
		width: 100%;
		height: 160px;
		._header-control{
			position: relative;
			padding-left: 20px;
			display: grid;
			grid-template-columns: 1fr 80px;
			height: 38px;
			z-index: 3;
			transition: all .3s;
			transform: translateY(24px);
			&._header-control-focus{
				transform: translateY(16px);
			}
			._header-control-input{
				display: grid;
				grid-template-columns: 40px 1fr;
				border-radius: 12px;
				background: #fff;
				align-items: center;
				justify-items: center;
				i{
					font-size: 1.125rem;
					color: #717171;
				}
				input[type=text]{
					box-sizing: border-box;
					padding: 10px;
					padding-left: 0;
					width: 100%;
					height: 100%;
					background: none;
					border: none;
					font-size: 0.875rem;
				}
			}
			&>i{
				align-self: center;
				justify-self: center;
				font-size: 1.875rem;
				color: #fff;
			}
		}
		._header-banner{
			position: absolute;
			top: 0;
			z-index: 1;
			width: 100%;
			height: 100%;
			background: url(../../img/search-bg.jpg) no-repeat center/cover;
			transform: scale(1);
			transition: all .3s;
			&._header-banner-focus{
				transform: scale(1.2);
			}
		}
	}
	._contain{
		position: absolute;
		top: 0;
		box-sizing: border-box;
		padding-top: 20px;
		padding-bottom: 50px;
		width: 100%;
		height: calc(100vh - 120px);
		border-radius: 24px 24px 0 0;
		background: #fff;
		z-index: 3;
		overflow: hidden;
		transition: all .3s;
		transform: translateY(120px);
		&._contain-focus{
			transform: translateY(70px);
			height: calc(100vh - 50px);
		}
	}
}